import React, { Component } from "react";
import "./Menu.scss";

export namespace Menu {
    export interface Props {
        left?: number;
        top?: number;
        wantToRefresh?: (event?: Event) => void;
        openWith?: (editor: 'code' | 'finder', event?: Event) => void;
        createNewFile?: (type: string, event?: Event) => void;
        selectedFile: string | undefined;
        renameFile: () => void;
        delFile: () => void;
        addFolder: () => void;
    }
    export interface State {
        addTypeElm: JSX.Element[];
        top: number;
        left: number;
        selectedFile: string;
    }
}

export class Menu extends Component<Menu.Props, Menu.State>{
    public readonly state = {
        addTypeElm: [],
        top: window.innerHeight / 2,
        left: window.innerWidth * 0.5,
        selectedFile: '',
    };
    public elm: HTMLElement;
    constructor(props: Menu.Props) {
        super(props);
    }

    public render() {
        let self = this;
        return <div
            ref={(elm) => { this.elm = elm; }}
            className="menu"
            style={{ top: self.state.top.toString() + 'px', left: self.state.left.toString() + 'px' }}
        >
            <div className="menu-item refresh" onClick={this.refresh.bind(this)}>刷新</div>
            <div className="menu-item use-code" onClick={this.openWith.bind(this, 'code')}>用Code打开</div>
            <div className="menu-item use-default" onClick={this.openWith.bind(this, 'default')}>系统默认方式打开</div>
            {this.getFileItem()}
        </div>
    }
    protected renameItem() {
        this.props.renameFile();
    }
    protected delItem() {
        this.props.delFile();
    }
    protected getEditItem(): JSX.Element[] {
        let renameItemDiv = <div
            key="rename-item"
            className="menu-item rename-item"
            onClick={this.renameItem.bind(this)}
        >重命名</div>;
        let delItemNode = <div
            key="delete-item"
            className="menu-item delete-item"
            onClick={this.delItem.bind(this)}
        >删除</div>
        return [renameItemDiv, delItemNode]
    }
    protected getFileItem(): JSX.Element[] {
        if (this.state.selectedFile) {
            return this.getEditItem();
        }
        return this.state.addTypeElm;
    }
    public openWith(editor: 'code' | 'finder') {
        this.props.openWith(editor, event);
    }
    public addMenuOfAddTypes() {
        let types = ["ts", "tsx", "scss", "less", "html", "md", "css", "es6", "js", "jsx"];
        let addTypeElm = types.map(type => {
            return this.addMenuOfAddType(type);
        });
        addTypeElm.push(this.addMenuOfAddFolder());
        this.setState({
            addTypeElm,
        });
    }
    public addMenuOfAddFolder() {
        return <div
            key={(new Date()).getTime() + 'x'}
            className="menu-item add-folder"
            onClick={this.addFolder.bind(this)}
        >新建文件夹</div>
    }
    public addFolder() {
        this.props.addFolder();
    }
    public addMenuOfAddType(type: string) {
        let className = `menu-item add-${type}`;
        return <div key={type} className={className} onClick={this.createNewFile.bind(this, type)}>新建<span className={"file-type file-" + type}>{type}</span>文件</div>;
    }
    public createNewFile(type: string) {
        this.props.createNewFile(type);
    }
    public componentWillMount() {
        this.addMenuOfAddTypes();
    }
    public componentDidMount() {
        let { top, left, selectedFile } = this.props;
        this.setState({
            top,
            left,
            selectedFile
        })
        if (this.elm) {
            this.modifyPos();
        }
    }
    public componentDidUpdate() {
        this.modifyPos();
    }
    public componentWillReceiveProps(nextProps: Menu.Props) {
        let { top, left, selectedFile } = nextProps;
        this.setState({
            top,
            left,
            selectedFile
        });
    }
    public modifyPos() {
        let nowStyle = window.getComputedStyle(this.elm);
        let top = parseInt(nowStyle.top) || 0;
        let left = parseInt(nowStyle.left) || 0;
        let width = this.elm.offsetWidth;
        let height = this.elm.offsetHeight;
        // console.log(top + height, window.innerHeight, top - height);
        if (top + height > window.innerHeight) {
            let minTop = top - height;
            if (minTop < 0) {
                minTop = window.innerHeight - height - 10;//10为缓冲
            }
            this.setState({
                top: minTop
            });
        }
        if (left + width > window.innerWidth && (left - width > 0)) {
            this.setState({
                left: left - width
            });
        }
    }
    public refresh() {
        this.props.wantToRefresh(event);
    }
}